<template>
  <div class="add-brand-box" v-show="showWholePage">
    <TitleBar :title="title" :backFunction="goBack"></TitleBar>
    <section class="tips">
      <p>请按照“品牌发布”输入提示填写相关信息，我们将对您的资质信息进行数字化保密。</p>
    </section>
    <section v-show="step == 1">
      <BrandOne ref="one" :showWarn="showWarn" :uesrOldInfo="uesrOldInfo" @showTemplate="showTemplate" @onStep="stepChange" @onErrShow="errShow" @onMsgText="onMsgText"></BrandOne>
    </section>
    <section v-show="step == 2">
      <BrandTwo ref="two" :uesrOldInfo="uesrOldInfo" @showTemplate="showTemplate" @onErrShow="errShow" @onMsgText="onMsgText"></BrandTwo>
    </section>
    <section class="submit-box">
      <button class="service" @click="onShowMenu">
        <span class="phone"></span>
        客服
      </button>
      <button class="next" @click="submit">{{btnText}}</button>
    </section>
    <vodal :show="templateShow" animation="zoom" @hide="templateShow = false" measure="rem" :width="6" :height="height" :closeButton="false">
      <div ref="template">
        <PromptFrame :imgType="imgType" :errType="errType" :msgText="msgText" @onClose="onClose"></PromptFrame>
      </div>
    </vodal>
    <VoteMenu v-show="showMenu" :onlyService="true" @closeMenu="onCloseMenu"></VoteMenu>
  </div>
</template>
<script>
import TitleBar from '../../components/TitleBar'
import BrandOne from './components/AddBrandOne'
import BrandTwo from './components/AddBrandTwo'
import PromptFrame from '../../components/PromptFrame'
import VoteMenu from '../../components/VoteMenu'
import scroll from '../../mixins/scroll'
import { mapState } from 'vuex'
import * as events from '../../store/events'

export default {
  mixins: [scroll],
  components: {
    TitleBar,
    BrandOne,
    BrandTwo,
    PromptFrame,
    VoteMenu
  },
  data() {
    return {
      title: '品牌推荐(1/2)',
      btnText: '下一步',
      showMenu: false, // 是否显示菜单
      step: 1,
      catid: null,
      templateShow: false,
      showWarn: false,
      imgType: 'yyzz',
      errType: false,
      msgText: '品牌推荐内容有误，请仔细检查并重新填写！',
      catInfo: null,
      userInfo: null,
      height: 8,
      uesrOldInfo: null,
      isWeiXin: false, // 是否是微信端
      isPhone: false, // 是否是手机端
      showWholePage: false
    }

  },
  created() {
    this.isWeiXin = this.$getDeviceInfo().isWeiXin
    this.isPhone = this.$getDeviceInfo().isPhone
    this.getFrom()
    if (this.isWeiXin && !this.isPhone) {
      window.addEventListener('beforeunload', () => (
        window.sessionStorage.removeItem('brandFrom')
      ), true)
    }
  },
  computed: {
    ...mapState({
      wxqr: s => s.serviceInfo.wxqr
    })
  },
  methods: {
    getFrom() {
      // 验证是从列表页进入还是外部分享连接进入
      if (this.$route.query.itemid) {
        // 判断是微信且是手机端
        if (this.isWeiXin && this.isPhone) {
          this.getUserOldInfo()
          this.getCategoryInfo()
        } else {
          window.sessionStorage.setItem('replaced', true)
          this.$router.replace("/?catid=" + this.$route.query.catid)
        }
      } else {
        this.showWholePage = true
      }
    },
    getCategoryInfo() {
      this.$api.getCategoryInfo(this.$route.query.catid).then(data => {
        if (data.data.status == 1) {
          let info = data.data.info
          // catname存到store中
          this.$store.commit(events.SET_CAT_NAME, info.catname)
          // 客服数据
          let service = {
            qq: info.qq, // 客服qq号码
            wxqr: info.wechatqr, // 客服微信二维码
            tel: info.service_tel   // 客服电话
          }
          // 客服数据存到store中
          this.$store.commit(events.SET_SERVICE_INFO, service)
        }
      })
    },
    // 获取表单内容
    getUserOldInfo() {
      this.$api.getFailBrand(this.$route.query.catid, {
        itemid: this.$route.query.itemid
      }).then(data => {
        if (data.data.status == 1) {
          this.showWholePage = true
          this.uesrOldInfo = data.data.info
        } else {
          window.sessionStorage.setItem('replaced', true)
          this.$router.replace('/?catid=' + this.$route.query.catid)
        }
      })
    },
    submit() {
      if (this.step == 1) {
        this.$refs.one.next()
      }
      if (this.step == 2) {
        this.$refs.two.submit()
      }
    },
    // 获取品牌详情
    getBrandDetail() {
      this.$api.getBrandDetail(this.$route.query.catid, {
        action: 'm_brand_detail',
        itemid: this.$route.query.itemid
      }).then(data => {
        if (data.data.status == 1) {
          this.userInfo = data.data.info
        }
      }).catch(err => {
        console.log(err)
      })
    },
    goBack() {
      if (this.step == 2) {
        this.step = 1
        this.title = '品牌推荐(1/2)'
        this.btnText = '下一步'
      } else if (!this.$route.query.formPath) {
        this.$router.replace('/?catid=' + this.$route.query.catid)
      } else {
        this.$router.back()
      }
    },
    stepChange(e) {
      if (e == 2) {
        this.step = e
        this.title = '品牌推荐(2/2)'
        this.btnText = '提交'
      }
    },
    showTemplate(e, v) {
      // 切换模板状态
      this.errType = false
      this.imgType = v
      this.templateShow = e
    },
    errShow(e) {
      if (this.wxqr) {
        this.height = 7.6
      } else {
        this.height = 5
      }
      this.templateShow = e
      this.msgText = '品牌推荐内容有误，请仔细检查并重新填写！'
      this.errType = true
    },
    onMsgText(e) {
      this.msgText = e
    },
    onClose() {
      this.templateShow = false
    },
    // 显示菜单
    onShowMenu() {
      this.showMenu = true
      this.scroll(false)
    },
    // 关闭弹出菜单
    onCloseMenu() {
      this.showMenu = false
      this.scroll(true)
    }
  },
  destroyed() {
    window.sessionStorage.removeItem('brandFrom')
    if (this.isWeiXin && !this.isPhone) {
      window.removeEventListener('beforeunload', () => { }, true)
    }
  }
}
</script>
<style lang="scss" scoped>
.add-brand-box {
  width: 100%;
  background-color: #f6f6f6;
  .tips {
    width: 100%;
    padding: 0.16rem 0.3rem;
    background: rgba(252, 237, 180, 1);
    p {
      font-size: 0.22rem;
      color: rgba(188, 144, 58, 1);
      letter-spacing: 0.01rem;
      line-height: 0.3rem;
    }
  }
  .mask-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  .submit-box {
    width: 100%;
    height: 1.9rem;
    background: #fff;
    padding: 0.3rem;
    display: flex;
    justify-content: space-between;
    button {
      height: 0.82rem;
      line-height: 0.82rem;
      font-size: 0.34rem;
      color: rgba(255, 255, 255, 1);
      border-radius: 0.1rem;
    }
    .service {
      width: 2rem;
      background: rgba(115, 158, 251, 1);
      .phone {
        display: inline-block;
        vertical-align: middle;
        width: 0.34rem;
        height: 0.34rem;
        background: url(../../assets/img/phone-icon.png) center no-repeat;
        background-size: cover;
      }
    }
    .next {
      width: 4.6rem;
      background: rgba(220, 196, 89, 1);
    }
  }
}
</style>
